在實作關燈模式的時候，是透過其他現成已經做好的 svg 來使用，但這樣其實很難去管理，當 icon 一多時，就更難去識別了。如果這時有一個方法能讓我們向使用 FontAwesome 一樣建立圖示，那就很方便了。

其實 Nuxt 就有一個名為 Icon Module 的 Module 能夠做到這件事，我們就來以實作預設佈局頁尾的社交網路圖示來作為示範吧！

首先安裝該 Module：

$ pnpm install --save-dev nuxt-icon

並將其加入 @/nuxt.config.ts 中的設定中：

export default defineNuxtConfig({
  modules: [
    '@nuxt/content',
    '@nuxtjs/color-mode',
    '@nuxtjs/tailwindcss',
    'nuxt-icon', // Add this line
  ],
})

這樣我們就可以使用 <Icon /> 來建立圖示了，例如：

<Icon name="uil:github" color="black" />
<Icon name="i-uil-github" color="black" />

其中的 name 就是向 FontAwesome 那樣的圖示識別碼，可以到 Icônes 去搜尋與使用；color 則可以為其設定顏色，亦可透過 CSS 設定。

接著我們就可以到 @/TheFooter.vue 中加入相關程式碼：

<template>
  <footer>
    <div class="flex flex-col items-center">
      ...
      <div>
        <SocialIcon name="mdi:email" href="dev@fntsr.tw" />
        <SocialIcon name="mdi:github" href="https://github.com/fntsrlike" />
        <SocialIcon name="mdi:linkedin" href="https://www.linkedin.com/in/fntsrlike/" />
      </div>
    </div>
  </footer>
</template>

為了不要有太多重複的程式碼，這邊再將 <Icon /> 進一步做了包裝，建立一個 <SocialIcon />：

<template>
<a target="_blank" :href="href" 
  class="mx-1 text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400">
  <Icon :name="name" class="fill-current"/>
</a>
</template>
<script setup lang="ts">
defineProps({
  name: {
    type: String,
    default: '',
  },
  href: {
    type: String,
    default: '',
  }
})
</script>

如此一來大功告成啦！